<template>
  <div id="app">
    <!-- 全局加载状态指示器 -->
    <el-loading v-model="loading" fullscreen lock text="加载中..." spinner="el-icon-loading"></el-loading>

    <!-- 路由视图 -->
    <router-view />
  </div>
</template>

<script>
import { ref, onMounted, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

export default {
  name: 'App',
  setup() {
    const router = useRouter();
    const loading = ref(false);

    // 监听路由变化，显示加载状态
    watchEffect(() => {
      const route = router.currentRoute.value;
      // 这里可以根据路由配置特定的加载状态
      loading.value = false;
    });

    // 全局错误处理
    const handleGlobalError = (error) => {
      console.error('全局错误:', error);
      ElMessage.error(error.message || '发生了未知错误');
    };

    // 注册全局错误处理
    window.addEventListener('error', handleGlobalError);
    window.addEventListener('unhandledrejection', (event) => {
      handleGlobalError(event.reason);
    });

    onMounted(() => {
      // 检查是否已登录
      const token = localStorage.getItem('admin_token');
      if (!token && router.currentRoute.value.path !== '/login') {
        router.push('/login');
      }
    });

    return {
      loading
    };
  }
}
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #f5f7fa;
}

/* Element Plus 表单样式覆盖 */
.el-form-item {
  margin-bottom: 22px;
}

.el-input__wrapper {
  border-radius: 8px;
  padding: 0 15px;
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
}

/* 全局动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>